import { useEffect } from "react";
import { Button, Input, Form, message } from "antd";
import { Link } from "react-router-dom";
import routesConfig from "../router/config";
// import { login } from "@/assets/js/networkRequest/index";

const FormItem = Form.Item;

const Login = (props: any) => {
  const { history } = props;

  const requiredHandle = (res: any) => {
    if (res && res.code === 0) {
      /* 对菜单进行排序,最后的菜单在最上面 */
      let menus: any = res.menu.sort((a: any, b: any) => b.parent_id - a.parent_id);
      if (!menus.length) {
        message.info("没有菜单");
        return;
      }
      /* 从最后一级菜单开始找其所属的菜单,最后筛选出一级菜单 */
      for (let i = 0, len = menus.length; i < len; i++) {
        // 将其它非菜单路由添加到所属的菜单中
        routesConfig.others.map((item: any) => {
          let path: string = item.path.split("/")[1];
          if (item.parent_menu === menus[i].path) {
            menus[i].other_menu = [...(menus[i].other_menu || []), `/${path}`];
          }
        });
        menus.map((item: any) => {
          /* 找到当前遍历的菜单所属的父菜单 */
          if (menus[i].parent_id === item.id) {
            item.sub = item.sub ? [...item.sub, menus[i]] : [menus[i]];
          }
        });
      }

      /* 保存菜单 */
      localStorage.setItem(
        "menus",
        JSON.stringify(menus.filter((item: any) => !item.parent_id && item.sub))
      );
      // localStorage.setItem("token", res.token);
      history.push("/");
    }
  };

  /* 登录提交 */
  const handleSubmit = async (values: any) => {
    // let res: any = await login({
    //   ...values,
    //   cid: 978758,
    // });
    requiredHandle({ code: 0, menu: routesConfig.menus });
  };

  useEffect(() => {
    if (localStorage.getItem("menus") && localStorage.getItem("token")) {
      history.push("/");
    }
  }, []);

  return (
    <div className="Login">
      <div className="top-title1">
        <img src="" alt="" />
        卓快
      </div>
      <div className="top-title2">引领微信生态裂变增长营销</div>

      <Form onFinish={handleSubmit} className="center">
        <p className="title">密码登录</p>

        {/* 账号 */}
        <FormItem name="username" rules={[{ required: true, message: "请输入用户名!" }]}>
          <Input
            size="large"
            placeholder="请输入手机号码 / 用户名"
            prefix={<i className="iconfont icon-zhanghao" />}
          />
        </FormItem>

        {/* 密码 */}
        <FormItem name="password" rules={[{ required: true, message: "请输入密码!" }]}>
          <Input.Password
            size="large"
            placeholder="请输入密码"
            prefix={<i className="iconfont icon-mima" />}
          />
        </FormItem>

        <Button type="primary" htmlType="submit" block>
          登录
        </Button>

        <p className="to-register">
          没有帐号？ <Link to="/register">立即注册</Link>
        </p>
      </Form>

      <div className="bottom">
        <p>—— 微信生态用户裂变增长运营专家 ——</p>
        {/* <p className="copy">@2021 - 小裂变 - 苏ICP备18014742号-2 版权所有 ©</p> */}
      </div>
    </div>
  );
};

export default Login;
